import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import { Button, Radio } from 'antd';
import CategoryTable from '@/components/CategoryTable/CategoryTable'
import IntegrationArticle from '@/components/IntegrationArticle/IntegrationArticle'
import IntegrationMission from '@/components/IntegrationMission/IntegrationMission'
import IntegrationOthers from '@/components/IntegrationOthers/IntegrationOthers'
import './Distribution.less'

@inject('rootStore') @observer
class Distribution extends Component {
  @observable currentStep = 0;

  componentDidMount() {
    const integrationStore = this.props.rootStore.integrationStore;

    if (!integrationStore.categoryFiftyLoadSuccess) {
      integrationStore.toGetNewsCategoryFifty()
    }

    if (!integrationStore.templateLoadSuccess) {
      integrationStore.toGetTemplate()
    }
  }

  stepOnChange = (e) => {
    this.currentStep = e.target.value
  }

  render() {
    const integrationStore = this.props.rootStore.integrationStore;

    return (
      <div className="page-content distribution">
        <div className="category-table">
          <div className="distribution-table-config">
            <div className="distribution-config-btn">
              <Button className="mr20" type="primary">Reset Below List</Button>
              <Button className="mr20" type="primary">Reset All</Button>
              <Button type="primary" onClick={integrationStore.updateIntegration}>Save</Button>
            </div>
            <div className="distribution-config-tab">
              <Radio.Group
                value={this.currentStep}
                buttonStyle="solid"
                onChange={this.stepOnChange}>
                <Radio.Button value={0}>Article</Radio.Button>
                <Radio.Button value={1}>Mission</Radio.Button>
                <Radio.Button value={2}>Others</Radio.Button>
              </Radio.Group>
            </div>
          </div>
          {
            this.currentStep === 0 ?
            <div>
              <div className="title-name">Category:</div>
              <CategoryTable />
              <div className="category-article">
                <div className="article-name">Article:</div>
                <div className="article-container">
                  <IntegrationArticle
                    firstArticleFrom={integrationStore.articleParam[0].minLimit}
                    firstArticleFromOnChange={integrationStore.firstArticleFromOnChange}
                    firstArticleIntegral={integrationStore.articleParam[0].awards[0].amount}
                    firstArticleIntegralOnChange={integrationStore.firstArticleIntegralOnChange}
                    secondArticleFrom={integrationStore.articleParam[1].minLimit}
                    secondArticleFromOnChange={integrationStore.secondArticleFromOnChange}
                    secondArticleTo={integrationStore.articleParam[1].maxLimit}
                    secondArticleToOnChange={integrationStore.secondArticleToOnChange}
                    secondArticleIntegral={integrationStore.articleParam[1].awards[0].amount}
                    secondArticleIntegralOnChange={integrationStore.secondArticleIntegralOnChange}
                    thirdArticleFrom={integrationStore.articleParam[2].minLimit}
                    thirdArticleFromOnChange={integrationStore.thirdArticleFromOnChange}
                    thirdArticleIntegral={integrationStore.articleParam[2].awards[0].amount}
                    thirdArticleIntegralOnChange={integrationStore.thirdArticleIntegralOnChange}
                  />
                </div>
              </div>
            </div>
            :
            null
          }
        </div>
        {
          this.currentStep === 1 ?
          <div className="mission-table mt0">
            <IntegrationMission
              loginIntegral={integrationStore.loginParam[0].awards[0].amount}
              loginIntegralOnChange={integrationStore.loginIntegralOnChange}
              signIntegral={integrationStore.signInParam[0].awards[0].amount}
              signIntegralOnChange={integrationStore.signIntegralOnChange}
              continuousSignList={integrationStore.continuousSignList}
              addSignInItem={integrationStore.addSignInItem}
              deleteSignItem={(index) => integrationStore.deleteSignItem(index)}
              signDaysOnChange={(e, index) => integrationStore.signDaysOnChange(e, index)}
              signDaysIntegralOnChange={(value, index) => integrationStore.signDaysIntegralOnChange(value, index)}
              signDaysPesoOnChange={(e, index) => integrationStore.signDaysPesoOnChange(e, index)}
              likeIntegral={integrationStore.likeShareParam[0].awards[0].amount}
              likeIntegralOnChange={integrationStore.likeIntegralOnChange}
              shareIntegral={integrationStore.likeShareParam[1].awards[0].amount}
              shareIntegralOnChange={integrationStore.shareIntegralOnChange}
              readRewardList={integrationStore.readRewardList}
              addReadRewardItem={integrationStore.addReadRewardItem}
              readArticleOnChange={(value, index) => integrationStore.readArticleOnChange(value, index)}
              readIntegralOnChange={(value, index) => integrationStore.readIntegralOnChange(value, index)}
              deleteReadItem={(index) => integrationStore.deleteReadItem(index)} />
          </div>
          :
          null
        }
        {
          this.currentStep === 2 ?
          <div className="others-table mt0">
            <IntegrationOthers
              contributeIntegral={integrationStore.contributeParam[0].awards[0].amount}
              contributeIntegralOnChange={integrationStore.contributeIntegralOnChange}
              contributeList={integrationStore.contributeList}
              addcontributeItem={integrationStore.addcontributeItem}
              deleteContributeItem={(index) => integrationStore.deleteContributeItem(index)}
              articlesOnChange={(value, index) => integrationStore.articlesOnChange(value, index) }
              articlesIntegrationOnChange={(value, index) => integrationStore.articlesIntegrationOnChange(value, index)}
              paymentIntegral={integrationStore.paymentParam[0].awards[0].amount}
              paymentIntegralOnChange={integrationStore.paymentIntegralOnChange}
              paymentList={integrationStore.paymentList}
              addPaymentItem={integrationStore.addPaymentItem}
              deletePaymentItem={(index) => integrationStore.deletePaymentItem(index)}
              paymentOnChange={(value, index) => integrationStore.paymentOnChange(value, index)}
              paymentListIntegralOnChange={(value, index) => integrationStore.paymentListIntegralOnChange(value, index)} />
          </div>
          :
          null
        }
      </div>
    )
  }
}

export default Distribution;
